<template>
    <div class="bottom-buy-box" v-if="goodsBox && Object.keys(goodsBox).length > 0">
        <!--<transition name="goodsBox"-->
        <!--enter-active-class="animated slideUp"-->
        <!--leave-active-class="animated slideDown">-->
            <div class="goods-box" :class="{'close-goods-box':closeGoodsBoxVar}" v-if="forAnimate">
                <div class="positionR">
                    <span class="goods-box-des" @click="goDetail(goodsBox.itemId)">详情 <span class="iconfont icon-arrows_up1"></span></span>
                    <h4 class="positionR goods-box-title">
                        {{goodsBox.title}}
                    </h4>
                    <span class="goods-box-close" @click="closeGoodsBox">×</span>
                    <div class="goods-box-wcart displayFlex flexCenter">
                        <span class="goods-box-price flex1">
                            <span class="fontSize12">{{goodsBox.currency}}</span>
                            <span class="goods-box-price-text">{{goodsBox.price}}</span>
                        </span>
                        <div class="displayFlex justifyCtBwt flex1">
                            <button class="goods-box-btn" @click="buyNow">立即购买</button>
                            <span class="positionR">
                                <img @click="addToCart" class="goods-box-join" src="../../../assets/images/store/store_cart.png" alt="">
                                <span class="red-point" v-if="goodsBox.add2Cart">{{goodsBox.userCartItemNum<=99?goodsBox.userCartItemNum:'99+'}}</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        <!--</transition>-->
    </div>
</template>
<script>
    export default {
        name: "BottomBuyBox",
        props:{
            goodsBoxProp:{
                type:Object
            }
        },
        data(){
            return{
                goodsBox:{
                    // storeId:'',//店铺id
                    // title:'',
                    // currency:'￥',
                    // price:0,
                    // itemId:0,//商品的id
                    // userCartItemNum:1,//用户购物车商品数量
                    // add2Cart:true,//商品是否已经加入购物车
                    // belongSwiperIndex:0,
                },
                forAnimate:false,
                closeGoodsBoxVar:false,//关闭前的动画
            }

        },
        beforeDestroy(){
            this.forAnimate = false;
        },
        mounted(){
            this.goodsBox = Object.assign({},this.goodsBox,this.goodsBoxProp);
            this.forAnimate = true;
        },
        methods:{
            buyNow(){
                let that = this;
                let tempObj = {
                    itemId:that.goodsBox.itemId,
                    number:1,
                    belongSwiperIndex:that.goodsBox.belongSwiperIndex,
                    openAlert:true
                }
                this.$emit('buyNow',tempObj);
            },
            addToCart(){
                let that = this;
                if(this.goodsBox.add2Cart){
                    this.$router.push({path:'/order/cart'});
                }else{
                    let obj = {
                        itemId:this.goodsBox.itemId,
                        buyNum:1,
                        belongSwiperIndex:that.goodsBox.belongSwiperIndex
                    }
                    this.$emit('addCart',obj);
                }
            },
            goDetail(itemId){
                this.$emit('showGoodsDetail',itemId);
            },
            closeGoodsBox() {
                this.closeGoodsBoxVar = true;
                setTimeout(()=>{
                    this.$emit('closeGoodsBox')
                },800)
            }
        },
        watch:{
            goodsBoxProp(val){
                this.goodsBox = Object.assign({},this.goodsBox,val);
            }
        }

    }
</script>

<style scoped lang="scss">
    .goods-box{
        position: absolute;
        left: .15rem;
        bottom: 1.2rem;
        width: 2.73rem;
        height: 1.04rem;
        background-color: rgba(255,255,255,.8);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        padding: .1rem;
        z-index: 1;
        -webkit-animation: goodsBoxPosition 1s;
        -o-animation: goodsBoxPosition 1s;
        animation: goodsBoxPosition 1s;
    }
    @keyframes goodsBoxPosition {
        0%{
            bottom: -1.04rem;
        }
        100%{
            bottom: 1.2rem;
        }
    }
    .close-goods-box{
        -webkit-animation: closeGoodsBoxPosition 1s;
        -o-animation: closeGoodsBoxPosition 1s;
        animation: closeGoodsBoxPosition 1s;
    }
    @keyframes closeGoodsBoxPosition {
        100%{
            bottom: -1.04rem;
        }
    }
    .goods-box-title{
        max-width: 90%;
        white-space: nowrap;
        text-overflow:ellipsis ;
        overflow: hidden;
        font-size: .13rem;
        color: #333;
        padding-top: .1rem;
    }
    .goods-box-close{
        position: absolute;
        right: 0;
        top: 0;
        display: inline-block;
        font-size: .2rem;
        color: #999;
    }
    .goods-box-price{
        color: #FF3333;
        font-size: .18rem;
        display: inline-block;
    }
    .goods-box-btn{
        width: .8rem;
        height: .3rem;
        background-image: linear-gradient(to right,#FF7574,#FF4646);
        -webkit-box-shadow: 0 0 .1rem #ccc;
        -moz-box-shadow: 0 0 .1rem #ccc;
        box-shadow: 0 0 .1rem #ccc;
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
        color: #fff;
        font-size: .12rem;
    }
    .goods-box-join{
        width: .3rem;
        height: .3rem;
    }
    .goods-box-wcart{
        padding-top: .1rem;
    }
    .goods-box-des{
        display: inline-block;
        padding: .03rem .05rem;
        background-color: #5D89E8;
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
        color: #fff;
        font-size: .11rem;
        line-height: .12rem;
        .icon-arrows_up1{
            position: relative;
            top: .01rem;
            font-size: .16rem;
            font-weight: 900;
        }
    }
    .red-point{
        position: absolute;
        right: -.06rem;
        top: -.06rem;
        display: inline-block;
        width: .2rem;
        height: .2rem;
        background-color: #FF4040;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        color: #fff;
        font-size: .12rem;
        text-align: center;
        line-height: .22rem;
        transform: scale(.8);
    }
</style>